
import React, { useEffect, useState, useCallback, useRef } from 'react';
import CommonService from '../../../../app/services/commonService';
import UniversityService from '../../../../app/services/universityService';

const UniversityDetailView = ({ id }) => {

    const divRef = useRef(null);
    const [basicInfo, setBasicInfo] = useState({
        belong: '',
        category: '',
        code: '',
        tags: '',
        type: '',
        universityName: ''
    });
    const [universityInfo, setUniversityInfo] = useState({
        department: {
            subjectCount: "44",
            masterCount: "63",
            doctorCount: "63",
            srpCount: "479"
        },
        rank: {
            ruankeRank: "1",
            xyhRank: "2",
            qsWorld: "25",
            usRank: "23",
            twsChina: "1"
        },
        disciplineRank: {
            aPlus: null,
            aMinus: "8",
            a: "8",
            bPlus: "10",
            bMinus: "2",
            b: null,
            cPlus: "2",
            cMinus: "2",
            c: null
        }
    });

    const [majorRecruitScores, setMajorRecruitScores] = useState([]);
    const [groupedHistoryScores, setGroupedHistoryScores] = useState([]);
    const fetchData = useCallback(() => {
        loadData(id)
    }, [id]);

    useEffect(() => {
        fetchData()
    }, [id])

    const loadData = async (id) => {
        if (!id) {
            return
        }
        CommonService.setLoading(true);
        UniversityService.universityDetail(id).then((res) => {
            divRef.current.scrollTo({ top: 0, behavior: 'smooth' });
            if (res.status === 200) {
                setBasicInfo(res.data.basicInfo)
                setUniversityInfo(res.data.universityInfo)
                setMajorRecruitScores(res.data.majorRecruitScores)
                setGroupedHistoryScores(res.data.groupedHistoryScores)
            }
        }).finally(() => {
            CommonService.setLoading(false);
        })
    }

    return (
        <>
            <div className="container text-sm" >
                <div className="flex flex-row items-center justify-center my-6 p-2  text-lg font-bold">
                    <div>{basicInfo.universityName}</div> <span className="text-gray-500">({basicInfo.code})</span>
                </div >
                <div ref={divRef} className=' overflow-y-auto' style={{ height: '500px' }}>
                    <div className='flex flex-col border-0 rounded-md shadow-md shadow-base-300 p-2 bg-base-200' >
                        <div className="flex flex-row items-center justify-start p-2  ">
                            <div className=' text-lg font-bold'>基本信息（2023）</div>
                        </div>
                        <div className='divider mx-4' />
                        <div className="flex flex-row items-center justify-evenly m-2 p-1">
                            <div className='flex-1 flex flex-row items-center justify-start '><div className='font-semibold'>类型:</div> <div className={` mx-2 px-2 `}>{basicInfo.category}</div></div>
                            <div className='flex-1 flex flex-row items-center justify-start '><div className='font-semibold'>类型:</div> <div className={` mx-2 px-2 ${basicInfo.type != '公办' ? 'text-red-500' : 'text-green-500'} `}>{basicInfo.type}</div></div>
                            <div className='flex-1 flex flex-row items-center justify-start '><div className='font-semibold'>标签:</div> <div className={`mx-2 px-2  `}>{basicInfo.tags}</div></div>
                            <div className='flex-1 flex flex-row items-center justify-start '><div className='font-semibold'>隶属:</div> <div className={` mx-2 px-2 `}>{basicInfo.belong}</div></div>
                        </div>
                        <div className="flex flex-row items-center justify-evenly m-2 p-1">
                            <div className='flex-1 flex flex-row items-center justify-start '><div className='font-semibold'>博士点:</div> <div className='mx-2 px-2'>{universityInfo.department.doctorCount}</div></div>
                            <div className='flex-1 flex flex-row items-center justify-start '><div className='font-semibold'>硕士点:</div> <div className='mx-2 px-2'>{universityInfo.department.masterCount}</div></div>
                            <div className='flex-1 flex flex-row items-center justify-start '><div className='font-semibold'>国家重点学科:</div> <div className='mx-2 px-2'>{universityInfo.department.subjectCount}</div></div>
                            <div className='flex-1 flex flex-row items-center justify-start '><div className='font-semibold'>科研项目:</div> <div className='mx-2 px-2'>{universityInfo.department.srpCount}</div></div>
                        </div>
                        <div className="flex flex-row items-center justify-evenly m-2 p-1">
                            <div className='flex-1 flex flex-row items-center justify-start '><div className='font-semibold'>软科综合排名:</div> <div className='mx-2 px-2'>{universityInfo.rank.ruankeRank}</div></div>
                            <div className='flex-1 flex flex-row items-center justify-start '><div className='font-semibold'>校友会综合排名:</div> <div className='mx-2 px-2'>{universityInfo.rank.xyhRank}</div></div>
                            <div className='flex-1 flex flex-row items-center justify-start '><div className='font-semibold'>QS世界排名:</div> <div className='mx-2 px-2'>{universityInfo.rank.qsWorld}</div></div>
                            <div className='flex-1 flex flex-row items-center justify-start '><div className='font-semibold'>US世界排名:</div> <div className='mx-2 px-2'>{universityInfo.rank.usRank}</div></div>
                        </div>
                    </div>
                    <div className='flex flex-col border-0 rounded-md shadow-md shadow-base-300 my-2 p-2 bg-base-200' >
                        <div className="flex flex-row items-center justify-start mx-1 p-1  ">
                            <div className=' text-lg font-bold'>学科排名第四轮</div>
                        </div>
                        <div className='divider mx-4' />
                        <div className="flex flex-row items-center justify-center mx-4 px-1">
                            <div className='flex-1 flex flex-row items-center justify-start '><div className='font-semibold'>A+:</div> <div className={`mx-2 px-2 `}>{universityInfo.disciplineRank.aPlus}个</div></div>
                            <div className='flex-1 flex flex-row items-center justify-start '><div className='font-semibold'>A:</div> <div className={`mx-2 px-2  `}>{universityInfo.disciplineRank.a}个</div></div>
                            <div className='flex-1 flex flex-row items-center justify-start '><div className='font-semibold'>A-:</div> <div className={` mx-2 px-2'} `}>{universityInfo.disciplineRank.aMinus}个</div></div>
                        </div>
                        <div className="flex flex-row items-center justify-evenly mx-4 p-1">
                            <div className='flex-1 flex flex-row items-center justify-start '><div className='font-semibold'>B-:</div> <div className={` mx-2 px-2 `}>{universityInfo.disciplineRank.bMinus}个</div></div>
                            <div className='flex-1 flex flex-row items-center justify-start '><div className='font-semibold'>B+:</div> <div className={` mx-2 px-2 `}>{universityInfo.disciplineRank.bPlus}个</div></div>
                            <div className='flex-1 flex flex-row items-center justify-start '><div className='font-semibold'>B:</div> <div className={` mx-2 px-2 `}>{universityInfo.disciplineRank.b}个</div></div>
                        </div>
                        <div className="flex flex-row items-center justify-evenly mx-4 p-1">
                            <div className='flex-1 flex flex-row items-center justify-start '><div className='font-semibold'>C+:</div> <div className={` mx-2 px-2 `}>{universityInfo.disciplineRank.cPlus}个</div></div>
                            <div className='flex-1 flex flex-row items-center justify-start '><div className='font-semibold'>C:</div> <div className={` mx-2 px-2 `}>{universityInfo.disciplineRank.c}个</div></div>
                            <div className='flex-1 flex flex-row items-center justify-start '><div className='font-semibold'>C-:</div> <div className={` mx-2 px-2 `}>{universityInfo.disciplineRank.cMinus}个</div></div>
                        </div>
                    </div>
                    <div className=' grid grid-cols-2 gap-2  border-0 rounded-md shadow-md shadow-base-300 my-2 p-2'>
                        <div className='flex flex-col  bg-base-200' >
                            <div className="flex flex-row items-center justify-center mx-1 pt-2 ">
                                <div className=' text-lg font-bold'>院校录取分数线</div>
                            </div>
                            <div className='divider mx-4' />
                            {groupedHistoryScores && groupedHistoryScores.length > 0 && groupedHistoryScores.map((item, index) => {
                                return (<div key={index} className="card card-border m-2">
                                    <h5 className='card-title p-2 m-2'>{item.year}/{item.examineType}</h5>
                                    <div className='divider mx-4' />
                                    <div className='card-body p-2 m-2'>
                                        {item.historyScores && item.historyScores.length > 0 && item.historyScores.map((score, subIndex) => {
                                            return (
                                                <div key={subIndex} className='flex flex-col my-1  border-2 rounded-md shadow-lg px-4 py-2  my-1'>
                                                    <div className='flex flex-row items-center justify-start '>
                                                        <div className='flex-1 flex flex-row items-center justify-start'>
                                                            <div className=' font-semibold'>批次:</div><div className=' mx-2 px-2'>{score.batch}</div>
                                                        </div>
                                                        <div className='flex-1 flex flex-row items-center justify-start '>
                                                            <div className='font-semibold'>备注:</div><div className=' mx-2 px-2'>{score.submitType}</div>
                                                        </div>
                                                    </div>
                                                    <div className='flex flex-row items-center justify-start  my-1'>
                                                        <div className='flex flex-row items-start justify-start font-semibold'>最低分/位次:</div><div className=' mx-2 px-2'>{score.score}分/{score.rank}位</div>
                                                    </div>
                                                </div>
                                            )
                                        })}
                                    </div>
                                </div>)
                            })}
                        </div>
                        <div className='flex flex-col  bg-base-200' >
                            <div className="flex flex-row items-center justify-center mx-1 pt-2 ">
                                <div className=' text-lg font-bold'>专业招生分数线</div>
                            </div>
                            <div className='divider mx-4' />
                            {majorRecruitScores && majorRecruitScores.length > 0 && majorRecruitScores.map((item, index) => {
                                return (<div key={index} className="card card-bordered m-2">
                                    <h5 className='card-title p-2 m-2'>{item.year}/{item.examineType}</h5>
                                    <div className='divider mx-4' />
                                    <div className='card-body p-2 m-2'>
                                        {item.historyScores && item.historyScores.length > 0 && item.historyScores.map((score, subIndex) => {
                                            return (
                                                <div key={subIndex} className='flex flex-col my-1 border-2 rounded-md shadow-lg px-4 py-2'>
                                                    <div className='flex flex-row items-center justify-start text-base font-semibold py-2 px-1'>
                                                        {score.majorName}
                                                    </div>
                                                    <div className='flex flex-row items-center justify-start my-1'>
                                                        <div className='flex-1 flex flex-row items-center justify-start'>
                                                            <div className=' font-semibold'>批次:</div><div className=' mx-2 px-2'>{score.batch}</div>
                                                        </div>
                                                        <div className='flex-1 flex flex-row items-center justify-start '>
                                                            <div className=' font-semibold'>投档类型:</div><div className=' mx-2 px-2'>{score.submitType}</div>
                                                        </div>
                                                    </div>
                                                    <div className='flex flex-row items-center justify-start my-1'>
                                                        <div className='flex flex-row items-start justify-start font-semibold'>最低分/位次:</div><div className=' mx-2 px-2'>{score.score}分/{score.rank}位</div>
                                                    </div>
                                                    <div className='flex flex-row items-center justify-start my-1'>
                                                        <div className='flex flex-row items-start justify-start font-semibold'>学科限选:</div><div className=' mx-2 px-2'>{score.subjectRequireName}分/{score.rank}位</div>
                                                    </div>
                                                </div>
                                            )
                                        })}
                                    </div>
                                </div>)
                            })}
                        </div>

                    </div>
                </div>
            </div>
        </>
    )
}

export default UniversityDetailView;